<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>按钮点击圈圈效果</title>
<style type="text/css">
.btn{
	overflow: hidden;
	position: relative;
	width: 100px;
	height: 100px;
	margin-left: 50px;
	margin-top: 50px;
}
.btn:not([disabled]):active::after {
	transform: translate(-50%,-50%) scale(0);
	opacity: .3;
	transition: 0s;
}
.btn::after {
	content: "";
	display: block;
	position: absolute;
	width: 100%; height: 100%;
	left: var(--x, 0);
	top: var(--y, 0);
	pointer-events: none;
	background: radial-gradient(circle, currentColor 10%, transparent 10.01%) no-repeat 50%;
	transform: translate(-50%,-50%) scale(10);
	opacity: 0;
	transition: transform .3s, opacity .8s;
}
</style>
</head>
<body>

<button class="btn">按钮</button>


<script type="text/javascript">
document.addEventListener('mousedown', function (e) {
	var target = e.target;
	var body = document.body;
	var html = document.documentElement;

	// 设置自定义属性值
	body.style.setProperty('--pagex', e.pageX);
	body.style.setProperty('--pagey', e.pageY);

	html.style.setProperty('--clientx', e.clientX);
	html.style.setProperty('--clienty', e.clientY);
	html.style.setProperty('--scrolly', window.pageYOffset);
	
	target.style.setProperty('--x', e.offsetX+'px');
	target.style.setProperty('--y', e.offsetY+'px');
	target.parentElement.style.setProperty('--target-width', target.clientWidth);
	target.parentElement.style.setProperty('--target-height', target.clientHeight);
	target.parentElement.style.setProperty('--target-left', target.offsetLeft);
	target.parentElement.style.setProperty('--target-top', target.offsetTop);
});

	
</script>
</body>
</html>
